<template>
  <ul class="list">
    <li class="item"
    v-for="item of letters"
    :key="item"
    @click="handleLetCilick"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
    :ref="item">{{item}}</li> <!-- 触摸事件(touch)
touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。

touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。

touchend事件：当手指从屏幕上离开的时候触发。

touchcancel事件：当系统停止跟踪触摸的时候触发。 -->
  </ul>
</template>

<script>
export default {
  name: 'CityAlphabet',
  props: {
    cities: Object
  },
  computed: { // 计算属性
    letters () {
      const letters = []
      for (let i in this.cities) {
        letters.push(i)
      }
      return letters
    }
  },
  data () {
    return {
      touchStatus: false,
      startY: 0,
      timer: null
    }
  },
  updated () { // 页面完成渲染后自动运行钩子
    this.startY = this.$refs['A'][0].offsetTop
  },
  methods: {
    handleLetCilick (e) {
      this.$emit('change', e.target.innerText) // 向父组件传值。事件名字change,内容e.target.innerText
      // console.log(e.target.innerText)
    },
    handleTouchStart () { // 当手指触摸屏幕时出发（一触即发）
      this.touchStatus = true
    },
    handleTouchMove (e) { // 当手指在屏幕上滑动时连续触发（该事件自带阻止滚动事件preventDefault（））
      if (this.touchStatus) {
        if (this.timer) { // 函数节流 （节约函数执行频率）
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          // const startY = this.$refs['A'][0].offsetTop // 获得A到头部底部的距离 74
          const touchY = e.touches[0].clientY - 79 // 当前手指距离最顶部的高度 - 头部蓝色部分的高度 = 当前手指到头部底部的距离
          const index = Math.floor((touchY - this.startY) / 20) // 当前字母下标 = （当前手指到头部底部的距离 - A到头部底部的距离） / 每个字母的高度
          // console.log(startY)
          // console.log(touchY)
          // console.log(index)
          if (index >= 0 && index <= this.letters.length) { // 确保index的值准效
            this.$emit('change', this.letters[index]) // 向父组件触发一个事件， 并传递此时字母值
            // console.log(this.letters[index])
          }
        }, 16)
      }
    },
    handleTouchEnd () { // 当手指离开屏幕时触发
      this.touchStatus = false
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .list
    display flex
    flex-direction column
    justify-content center
    position absolute
    right 0
    bottom 0
    top 1.58rem
    width .4rem
    .item
       line-height .4rem
       text-align center
       color $bgColor
</style>
